<template>
  <div class="bg-light-300">
    <van-swipe class="my-swipe" :autoplay="5000" indicator-color="white">
      <van-swipe-item
        v-for="item in $store.state.Classification.detailData.info?.gallery"
        :key="item"
        >
        <van-image lazy-load :src="item">
          <!-- <template v-slot:loading>
            <van-loading class="w-60 m-auto" color="#0094ff" type="spinner" size="36" >加载中...</van-loading>
          </template> -->
        </van-image>
      </van-swipe-item>
    </van-swipe>
    <div class="price pl-1 ">
      <span class="text-red-500">￥{{ price.retailPrice }}</span>
      <span class="ml-2 text-gray-500 line-through" style="font-size: 12px;">￥{{ price.counterPrice }}</span>
    <p class="pl-1 "><span style="font-size: 14px;">{{ price.name }}</span></p>
    <p class="pl-1"><span class="text-gray-500 " style="font-size: 14px;">{{ price.brief }}</span></p>
    </div>
  </div>
</template>

<script>
// import { mapGetters } from 'vuex'
export default {
  name: 'Slideshow',
  components: {

  },
  data () {
    return {
    }
  },
  computed: {
    // ...mapGetters('Classification', ['price']),
    gallery () {
      return this.$store.state.Classification.detailData.info?.gallery
    },
    price () {
      return {
        name: this.$store.state.Classification.detailData.info?.name,
        brief: this.$store.state.Classification.detailData.info?.brief,
        counterPrice: this.$store.state.Classification.detailData.info?.counterPrice,
        retailPrice: this.$store.state.Classification.detailData.info?.retailPrice
      }
    }

  },
  mounted () {
  },
  methods: {

  }
}

</script>
<style scoped lang='scss'>
  .price{
    font-size: 24px;
  }
</style>
